<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 1.抓到div */
			div{
				width:300px;
				height:300px;
				/* 效果：背景色 */
				background-color: #e4393c;
				/* 外边距属性：“推”   效果：居中 */
				margin-left: 10px;
				margin-top: 10px;
				/* 居中：上下 右左 
				 页面宽度固定auto只实现右左*/
				margin: 300px auto;
				/* 旋转 转换属性：旋转属性值 */
				transform:rotate(135deg);
				/* 美化操作：滤镜属性--下阴影效果：光晕 */
				filter:drop-shadow(0 0 30px #c81f12);
				/* 启动动画属性：关键帧名称 过渡时间 流畅度 无限次*/
				animation: heart .8s linear infinite;
			}
			/* 俩圆？ */
			/* 伪类选择器：追加效果 
			 ：after 语法：任意选择器  配合属性content：“内容”
			 功能：追加一个效果：在元素之后生成一行文本内容
			 */
			 div:after{/* before  */
				 content:"";
				 /* html很多元素：种类 
				 文本内容-->行内元素，特点：不可设置宽高，在一行内显示
				    div--->块元素，特点：可设宽高，独占一行
						   行内元素转换为块元素---display属性：行转换*/
				display:block;
				 width: 300px;
				 height:300px;
				 background-color: #e4393c;
				 /* 倒角：画圆*/
				 border-radius: 50%;
				 /* 定位：*/
				 position:relative;
				 left:-150px;
				 top:-300px;
			 }
			 div:before{/* before  */
			 				 content:"";
			 				 /* html很多元素：种类 
			 				 文本内容-->行内元素，特点：不可设置宽高，在一行内显示
			 				    div--->块元素，特点：可设宽高，独占一行
			 						   行内元素转换为块元素---display属性：行转换*/
			 				display:block;
			 				 width: 300px;
			 				 height:300px;
			 				 background-color: #e4393c;
			 				 /* 倒角：画圆*/
			 				 border-radius: 50%;
			 				 /* 定位：*/
			 				 position:relative;
			 				 top:150px;
			 }
			 /* 关键帧属性：功能：手翻书功能*/
			 @keyframes heart{
				 0%{
					 /* 缩放 转换属性 属性值：scale（1代表等比例，1以下缩小，1以上放大）*/
					 transform: rotate(135deg) scale(1);
				 }
				 30%{
					 transform:rotate(135deg) scale(.8);
				 }
				 100%{
					 transform:rotate(135deg) scale(1.2);
			     }
			 
			 
			 
			 
			 
		</style>
	</head>
	<body>
		<!-- 心     html：div -->
		<div></div>
		<audio src="img/renxi.mp3" autoplay loop></audio>
	</body>
</html>